<!-- html css js -->
<template>
  <div>
    <!-- 差值表达式 -->

    <!-- {{counter}} -->
    <button @click="omSub" :disabled="!reduceAble">-</button>
    <input type="text" v-model.number="counter" @blur="onBlur" />
    <button @click="onAdd" :disabled="!addAble">+</button>
  </div>
</template>

<script>
// 数据驱动DOM
export default {
  data() {
    return {
      counter: 1,
      reduceAble: false,
      addAble: true,
    };
  },
  methods: {
    onAdd() {
      this.counter++; // 点击+时 放开减号的禁用
      if (this.counter > 1) {
        this.reduceAble = true;
      } // 加到顶了
      if (this.counter === 10) {
        this.addAble = false;
      }
    },
    omSub() {
      // 减到1之后不能在减了
      this.counter--; // 点击-时 放开+的禁用
      if (this.counter < 10) {
        this.addAble = true;
      }
      if (this.counter === 1) {
        this.reduceAble = false;
      }
    },
    onBlur() {
      // 如果小于10就放开+
      if (this.counter < 10) {
        this.addAble = true;
      } // 如果大于1就放开-
      if (this.counter > 1) {
        this.reduceAble = true;
      }
    },
  }, // mounted() { //     // div初次渲染完成时 执行的动作 //     setInterval(() => { //       this.counter++; //     }, 1000); // }
};
</script>

<style>
</style>
